<template>
    <div class="wel-box">
        <van-circle @click="clicEvt" v-model:current-rate="currentRate" :clockwise="false" size="60px" :color="{ '0%': 'red', '100%': 'blue' }"
            :text="`${Math.ceil(currentRate / 20)}s`" />
        <img src="../../images/logo.png" alt="">
        <p>为年轻人打造</p>
        <p>专业时尚的潮服交易平台</p>
        <div class="rigth">
            <p>@copy-rigth,chaofu,2023-10-21</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { AUTO_CACHE_KEY } from '../../config/common.cfg';

const router = useRouter()
const currentRate = ref(100)

let timer = setInterval(function () {
    currentRate.value -= 1
    if (currentRate.value <= 0) {
        clearInterval(timer)
        avoid()
    }
}, 50)
console.log(localStorage.getItem(AUTO_CACHE_KEY))
function clicEvt() {
    clearInterval(timer)
    avoid()
}

function avoid(){
 if(localStorage.getItem(AUTO_CACHE_KEY)){
        router.push('/home')
    }else{
        router.push('/login')
    }
}

</script>

<style lang="less" scoped>
@import '../../style/common.less';

::v-deep .van-circle__text {
    color: aliceblue;
    font-size: 1rem;
}

.wel-box {
    .rel();
    background: linear-gradient(to top, @g1, @g4);
    text-align: center;

    .van-circle {
        position: absolute;
        right: 10px;
        top: 10px;

    }

    img {
        display: block;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-left: calc(50% - 75px);
        margin-top: 200px;
    }

    >p {
        line-height: 40px;
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }

    .rigth {
        display: block;
        width: 100vw;
        position: absolute;
        bottom: 20px;
        z-index: 10;

        p {
            text-align: center;
            font-size: 18px;
            color: @c3;
            height: 30px;
            line-height: 30px;
        }
    }

}
</style>